<template>
  <uni-nav-bar leftIcon="left" :border="false" @clickLeft="clickLeft" @clickRight="confirmSearch" leftWidth="20px" rightWidth="36px" fixed>
    <view style="width: 100%;align-self: center;">
      <uni-search-bar :focus="true" v-model="searchValue" radius="20" @confirm="confirmSearch" placeholder="搜索内容" cancelButton="none">
        <template #searchIcon>
          <img src="https://img.qumoyugo.com/webimgbg/pets-icon-search-fd-g.png" class="img-nav-bar">
        </template>
      </uni-search-bar>
    </view>
    <template #right>
      <view style="font-size: 28rpx;padding-right: 6px">搜索</view>
    </template>
  </uni-nav-bar>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const searchValue = ref('')
const props = defineProps({
  search: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  searchValue.value = props.search
})
const emit = defineEmits(['search'])
const clickLeft = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: '/pages/index'
      })
    }
  })
}
const confirmSearch = () => {
  emit('search', searchValue.value)
}
</script>
<style scoped lang="scss">
.img-nav-bar{
  width: 16px;
  height: 16px;
}
</style>
